<template>
  <view class="queuing">
    <image src="@/static/logo.png" mode="" class="logo mar_auto_120"></image>
    <view class="teamName">
      设计团队名称
    </view>
    <view class="referenceQuotation">
      设计团队指引语
    </view>
    <view class="input_name t-ali-center mar_auto_120">
      <input class="inpu" type="text" v-model="name" placeholder="我们该如何称呼你" placeholder-style="color: #999999">
    </view>
    <view class="input_phone mar_auto_20">
      <input class="inpu" type="text" v-model="phone" placeholder="手机号" placeholder-style="color: #999999" disabled>
    </view>
    <view class="button mar_auto_120">
      取号
    </view>
  </view>
</template>

<script setup>
  import {
    reactive,
    toRefs
  } from 'vue'
  const data = reactive({
    page: '取号排队',
    // 称呼
    name: '',
    // 手机号
    phone: ''
  })
  const {
    page,
    name,
    phone
  } = toRefs(data)
</script>
<style>
  page {
    background-color: #fff;
  }
</style>
<style lang="scss">
  .queuing {
    text-align: center;

    .logo {
      width: 150rpx;
      height: 150rpx;
    }

    .teamName {
      margin-top: 10rpx;
      margin-bottom: 10rpx;
      font-size: 40rpx;
      font-weight: bold;
      text-align: center;
    }

    .referenceQuotation {
      font-size: 24rpx;
      text-align: center;
      color: #999999;
    }



    .input_name,
    .input_phone {
      width: 80%;
      height: 80rpx;
      line-height: 80rpx;
      padding-left: 20rpx;
      border-radius: 40rpx;
      background-color: #F3F3F3;
      text-align: left;
      box-sizing: border-box;

      .inpu {
        width: 90%;
        background-color: #F3F3F3;
        border: none;
        font-size: 24rpx;
        height: 80rpx;
        line-height: 80rpx;
        text-align: left;
        border-radius: 40rpx;
      }
    }

    .button {
      width: 150rpx;
      height: 150rpx;
      background-color: #B8BFBE;
      border-radius: 50%;
      text-align: center;
      line-height: 150rpx;
      color: #fff;
      font-size: 28rpx;
    }
  }
</style>